<!-- 学社 - 动态 - 提问 -->
<template>
  <view>
    <z-navbar title="提问" :border-bottom="true"></z-navbar>
    <view class="pt-2 px-4">
      <!-- 添加按钮 -->
      <view class="flex flex-wrap">
        <view class="btn mr-2 mt-3" @click="state.showConsultantPop = true">
          <u-image width="28" height="28" src="/static/images/home/ic_add_yellow.png" />
          <view v-if="adviserSelectNum == 0" class="ml-2">顾问(至少添加一位)</view>
          <view v-else class="ml-2">顾问({{ adviserSelectNum }}/{{ adviserTotalNum }})</view>
        </view>
        <view v-for="(item, index) in state.adviserSelectList" :key="index" class="btn mr-2 mt-3">
          <view class="mr-2">{{ item.user?.nickname }}</view>
          <u-image width="26" height="26" src="/static/images/home/ic_delete_round.png" @click="onDelete(index)" />
        </view>
      </view>
      <!-- 主体 -->
      <u-input v-model="state.content" placeholder="请输入问题并以问号结尾" placeholder-style="color: #999; fontSize: 28rpx;"
        :custom-style="titleInputStyle" />
      <u-line color="#E5E5E5" />
      <view class="relative">
        <image class="absolute top-40 left-0 w-28 h-24 z-2" src="/static/images/home/ic_edit.png"></image>
        <u-input v-model="state.remark" type="textarea" height="240" auto-height placeholder="对问题进行补充说明(选填)"
          :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
        <view class="absolute bottom-30 right-0 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view>
        <u-line color="#E5E5E5" />
      </view>
      <view class="mt-4">
        <z-file-upload ref="uploader" width="144" height="144" maxCount="6" />
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="flex justify-center items-center mx-4 mt-2 bg-#F4AF22 rounded-md h-68 c-#fff text-28"
        @click="onSubmit">发布问题</view>
    </view>
    <!-- 顾问选择 -->
    <adviser-select-pop :show="state.showConsultantPop" :club_id="state.club_id" @close="state.showConsultantPop = false"
      @confirm="onConfirm" />
  </view>
</template>

<script setup>
import { showToast, navigate,redirectTo } from '@/common/util/uni'
import { postQuestionAdd, getMemberCounselorList } from "@/common/http/module/society.js";
import { useUserStore } from '@/store/user'
import { refreshPrePage } from '@/common/util/util'

const userStore = useUserStore()
const uploader = ref()
const state = reactive({
  club_id: '', // 学社id
  maxInputNum: 500,
  showConsultantPop: false,
  content: '',
  remark: '',
  adviserSelectList: [], // 已选择的顾问列表
  adviserTotalList: [] // 所有顾问列表
})

const enteredNum = computed(() => {
  return state.remark.length > 500 ? 500 : state.remark.length
})

const titleInputStyle = {
  color: '#333',
  backgroundColor: '#fff',
  padding: '20rpx 0 8rpx 0',
  fontWeight: 'bolid'
}
const inputStyle = {
  backgroundColor: '#fff',
  padding: '32rpx 0 60rpx 48rpx'
}

const userInfo = computed(() => userStore.userInfo)
// 已选顾问数量
const adviserSelectNum = computed(() => {
  return state.adviserSelectList && state.adviserSelectList.length
})

// 顾问总数量
const adviserTotalNum = computed(() => {
  return state.adviserTotalList && state.adviserTotalList.length
})

// 选择顾问
function onConfirm (val) {
  console.log(val);
  state.adviserSelectList = val
}

// 删除顾问
function onDelete (i) {
  state.adviserSelectList[i].selected = false
  state.adviserSelectList.splice(i, 1)
}

// 发布
function onSubmit () {
  if (state.adviserSelectList.length == 0) {
    showToast('请选择顾问', 'error')
    return
  }
  if (!state.content) {
    showToast('请输入问题', 'error')
    return
  }
  const images = uploader.value.getUploadedList()
  postQuestionAdd({
    club_id: state.club_id,
    call_ids: state.adviserSelectList.map(v => v.user_id).join(','),
    content: state.content,
    remark: state.remark,
    slideshow: images.map(v => v.url).join(',')
  }).then((res) => {
    showToast('发布成功')
    
    refreshPrePage('refresh')
    // navigate(`/package_society/pages/society/index?club_id=${state.club_id}&&tabId=1`)
    // redirectTo(`/package_society/pages/society/index?club_id=${state.club_id}&&tabId=1`)
    setTimeout(() => {
      redirectTo(`/package_society/pages/trend/question/detail?id=${res.data.question_id}`)
    }, 600)
    //  uni.navigateBack()
  })
}

// 获取顾问列表
function loadData (club_id) {
  getMemberCounselorList(club_id).then(res => {
    state.adviserTotalList = res.data.filter(v => v.user_id != userInfo.value.id)
  })
}

onLoad((options) => {
  state.club_id = options.club_id
  loadData(state.club_id)
});
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #F6F6F6;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}
</style>
